<template>
    <div id="content">
        <!-- 用户管理卡片 -->
        <el-card style="max-width: 1080px">
            <!-- 卡片头部 -->
            <template #header>
                <div class="card-header">
                    <span>用户管理</span>
                    <br>
                    <!-- 添加数据按钮 -->
                    <el-button @click="add" type="primary">添加数据</el-button>
                    <!-- 删除选中按钮 -->
                    <el-button @click="deleteSelected" type="danger">删除选中</el-button>
                </div>
            </template>
            <!-- 用户表格 -->
            <el-table :data="currentTableData" style="width: 100%" @selection-change="handleSelectionChange">
                <!-- 复选框列 -->
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- 序号列 -->
                <el-table-column label="序号" width="180">
                    <template #default="scope">
                        {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- 姓名列 -->
                <el-table-column prop="name" label="姓名" width="180" />
                <!-- 邮箱列 -->
                <el-table-column prop="email" label="邮箱" width="180" />
                <!-- 头像列 -->
                <el-table-column prop="avatar" label="头像" width="180">
                    <template #default="scope">
                        <!-- 头像图片 -->
                        <el-image :src="scope.row.avatar" fit="fill" style="height:50px;width:50px"></el-image>
                    </template>
                </el-table-column>
                <!-- 删除列 -->
                <el-table-column label="删除" width="180">
                    <template #default="scope">
                        <!-- 删除按钮 -->
                        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 卡片底部 -->
            <template #footer>
                <div class="card-footer">
                    <!-- 分页组件 -->
                    <el-pagination size="small" layout="prev, pager, next" :total="total" :page-size="pageSize"
                        @current-change="changePage" />
                </div>
            </template>
        </el-card>

        <!-- 编辑用户弹框 -->
        <el-dialog v-model="dialogVisible" title="编辑用户" :close-on-click-modal="false">
            <div class="dialog-content">
                <el-form label-width="80px">
                    <!-- 用户名输入框 -->
                    <el-form-item label="用户名">
                        <el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <!-- 密码输入框 -->
                    <el-form-item label="密码">
                        <el-input v-model="editForm.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <!-- 姓名输入框 -->
                    <el-form-item label="姓名">
                        <el-input v-model="editForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <!-- 邮箱输入框 -->
                    <el-form-item label="邮箱">
                        <el-input v-model="editForm.email" type="email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <!-- 头像输入框 -->
                    <el-form-item label="头像">
                        <el-input v-model="editForm.avatar" placeholder="请输入头像地址"></el-input>
                    </el-form-item>
                    <!-- 按钮组 -->
                    <el-form-item>
                        <!-- 取消按钮 -->
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <!-- 确定按钮 -->
                        <el-button type="primary" @click="saveEdit">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElDialog } from "element-plus";
import { ref, computed, onMounted } from "vue";

// 控制编辑弹框的显示/隐藏
const dialogVisible = ref(false);

// 编辑表单的数据
const editForm = ref({
    username: "",
    password: "",
    name: "",
    email: "",
    avatar: ""
});

// 添加用户方法
const add = () => {
    // 重置表单数据
    editForm.value = {
        username: "",
        password: "",
        name: "",
        email: "",
        avatar: ""
    };
    // 显示编辑弹框
    dialogVisible.value = true;
};

// 当前选中的行
const handleSelection = ref([]);

// 处理表格选中变化
const handleSelectionChange = (val) => {
    handleSelection.value = val;
};

// 用户数据
const tableData = ref([]);

// 当前页码
const currentPage = ref(1);

// 每页显示条数
const pageSize = ref(3);

// 总数据条数
const total = computed(() => tableData.value.length);

// 当前页的数据
const currentTableData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

// 删除选中用户方法
const deleteSelected = async () => {
    if (handleSelection.value.length === 0) {
        // 如果没有选中任何行，显示警告
        ElMessage.warning('请选择要删除的用户');
        return;
    }
    try {
        // 确认对话框
        await ElMessageBox.confirm('确定要删除选中的用户吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        // 遍历选中的行
        for (const item of handleSelection.value) {
            const response = await fetch(`http://localhost:3000/users/${item.id}`, {
                method: 'DELETE'
            });
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error(`删除用户失败，状态码：${response.status}`);
            }
        }
        // 重新获取数据
        await fetchData();
        // 清空选中
        handleSelection.value = [];
        // 显示成功消息
        ElMessage.success('删除成功');
    } catch (error) {
        // 捕获错误
        if (error !== 'cancel') {
            ElMessage.error('删除失败：' + error.message);
        }
    }
};

// 保存编辑方法
const saveEdit = async () => {
    try {      
        let response;
            // 如果没有id，执行添加操作
            response = await fetch('http://localhost:3000/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(editForm.value)
            });
       

        // 检查响应是否成功
        if (!response.ok) {
            let errorMessage;
            const contentType = response.headers.get('Content-Type');
            if (contentType && contentType.includes('application/json')) {
                const errorData = await response.json();
                errorMessage = errorData.message || '未知错误';
            } else {
                errorMessage = await response.text();
            }
            throw new Error(`请求失败，状态码：${response.status}，错误信息：${errorMessage}`);
        }

        // 重新获取数据
        await fetchData();
        // 隐藏编辑弹框
        dialogVisible.value = false;
        // 显示成功消息
        ElMessage.success('操作成功');
    } catch (error) {
        // 捕获错误
        console.error('添加或编辑用户时出错:', error);
        ElMessage.error('操作错误：' + error.message);
    }
};

// 获取用户数据方法
const fetchData = async () => {
    try {
        const response = await fetch("http://localhost:3000/users");
        // 检查响应是否成功
        if (!response.ok) {
            throw new Error('获取用户数据失败');
        }
        const data = await response.json();
        console.log('获取到的用户数据:', data);
        tableData.value = data;
    } catch (error) {
        // 捕获错误
        ElMessage.error(error.message);
    }
};

// 组件挂载时调用
onMounted(() => {
    fetchData();
});

// 删除单个用户方法
const del = async (id) => {
    try {
        // 确认对话框
        await ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        // 发送删除请求
        await fetch(`http://localhost:3000/users/${id}`, {
            method: 'DELETE'
        });
        // 重新获取数据
        await fetchData();
        // 显示成功消息
        ElMessage.success('删除成功');
    } catch (error) {
        // 捕获错误
        if (error !== 'cancel') {
            ElMessage.error('删除失败');
        }
    }
};

// 分页方法
const changePage = (number) => {
    currentPage.value = number;
    ElMessage.success('跳转成功');
};
</script>

<style scoped>
/* 编辑弹框样式 */
.dialog-content {
    padding: 20px;
}

/* 响应式布局 */
@media (max-width: 768px) {
   .dialog-content {
        padding: 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .dialog-content {
        padding: 15px;
    }
}

@media (min-width: 1025px) {
   .dialog-content {
        padding: 20px;
    }
}
</style>
